<template lang="pug">
.userList
  .userHeader
    img(src="../../src/assets/logo.jpg", alt="alt")
    span 如花
    span 15630778839
  .main
    .mainHead
      span 我的订单
      span 全部订单 >
    .mainBox
      .xBox
        p.iconfont.icon-fukuan(@click="goDanZhi")
        span 代付款
      .about {{num}}
      .xBox
        p.iconfont.icon-daishouhuo2
        span 代付款
      .xBox
        p.iconfont.icon-weixiu
        span 代付款
  .content
    .list
      .item
        .headImg
          p.iconfont.icon-wangguan(style="color: rgb(253, 191, 45)")
        .listBox
          p 会员中心
          span.iconfont.icon-iconfontzhizuobiaozhun19
      .item
        .headImg
          p.iconfont.icon-qianbao(style="color: rgb(81, 187, 224)")
        .listBox
          p 我的优惠
          span.iconfont.icon-iconfontzhizuobiaozhun19
    .list
      .item
        .headImg
          p.iconfont.icon-xinaixin-fuben(style="color: rgb(249, 108, 94)")
        .listBox
          p 服务中心
          span.iconfont.icon-iconfontzhizuobiaozhun19
      .item
        .headImg
          p.iconfont.icon-dianpushidi(style="color: rgb(255, 139, 67)")
        .listBox
          p 小米中心
          span.iconfont.icon-iconfontzhizuobiaozhun19
    .list
      .item
        .headImg
          p.iconfont.icon-F(style="color: rgb(255, 179, 2)")
        .listBox
          p 我的F码
          span.iconfont.icon-iconfontzhizuobiaozhun19
      .item
        .headImg
          p.iconfont.icon-liwu(style="color: rgb(245, 166, 35)")
        .listBox
          p 礼物码兑换
          span.iconfont.icon-iconfontzhizuobiaozhun19
    .list
      .item
        .headImg
          p.iconfont.icon--group(style="color: rgb(129, 140, 152)")
        .listBox
          p 设置
          span.iconfont.icon-iconfontzhizuobiaozhun19
</template>
<script>
export default {
  data(){
    return{
      num:1
    }
  },
  methods:{
    goDanZhi(){
      this.$router.push('/my-ding/dai-zhi')
    }
  },
  created(){
    this.$http
      .get("http://192.168.43.168:8082/user/sele-addren")
      .then(({ data }) => {
        this.num = data.length;
      })
  }
};
</script>
<style lang="sass" scoped>
.userList
  width: 3.75rem
  background: rgb(245,245,245)
  height: 100vh
  .userHeader
    width: 100%
    height: .75rem
    background: rgb(233,122,18)
    display: flex
    align-items: center
    position: relative
    img
      width: .5rem
      height: 0.5rem
      margin-left: .15rem
      border-radius: 50%
    span
      color: #fff
      position: absolute
      left: .75rem
      top: .16rem
      &:last-child
        position: absolute
        left: .74rem
        top: .40rem
        font-size: .12rem
  .main
    width: 100%
    height: 1.2rem
    background: #fff
    margin-bottom: .15rem
    .mainHead
      width: 100%
      height: .4rem
      border-bottom: .01rem solid rgb(222,222,224)
      display: flex
      justify-content: space-between
      align-items: center
      span
        margin: 0 .2rem
        font-size: .14rem
    .mainBox
      width: 100%
      height: 100%
      display: flex
      justify-content: space-between
      position: relative
      .xBox
        width: 33%
        height: 60%
        display: flex
        justify-content: center
        align-items: center
        position: relative
        p
          font-weight: 600
          font-size: .18rem
          color: #999
        span
          display: inline-block
          position: absolute
          left: .43rem
          top: .48rem
          font-size: .12rem
        // background: #000
      .about
          position: absolute
          left: 0.65rem
          top: .19rem
          width: .12rem
          height: .12rem
          background: red
          border-radius: 50%
          text-align: center
          line-height: .12rem
          font-size: .06rem
          color: #fff
  .content
    width: 100%
    .list
      width: 100%
      height: 1rem
      background: #fff
      margin-bottom: .12rem
      &:last-child
        height: .5rem
      .item
        width: 100%
        height: 50%
        box-sizing: border-box
        display: flex
        &:last-child
          .listBox
            border-bottom: none
        .headImg
          width: 16%
          height: 100%
          box-sizing: border-box
          p
            font-size: .22rem
            text-align: center
            line-height: .5rem
        .listBox
          width: 84%
          height: .5rem
          box-sizing: border-box
          border-bottom: 1px solid #ccc
          display: flex
          align-items: center
          justify-content: space-between
          font-size: .14rem
          span
            margin-right: .15rem
            color: #666
</style>
